<!-- 菜谱分类主页面 -->
<template>
  <div class="recipe-category-page">
    <!-- 顶部标题和搜索栏 -->
    <div class="header">
      <h1>菜谱分类</h1>
      <div class="search-container">
        <van-search
          v-model="searchQuery"
          placeholder="小白菜谱共有10001道菜任你选择"
          shape="round"
          background="#ef4444"
          @click="goToSearchPage"
          class="custom-search"
        />
      </div>
    </div>
 
    <!-- 分类导航区域 -->
    <div class="category-container">
      <!-- 左侧大分类导航栏 - 可滑动 -->
      <div class="left-sidebar-wrapper">
        <div class="left-sidebar">
          <div
            v-for="(category, index) in mainCategories"
            :key="category.mainCategoryId"
            class="sidebar-item"
            :class="{ active: activeCategory === index }"
            @click="switchSubCategory(index)"
          >
            {{ category.mainCategoryName }}
          </div>
        </div>
      </div>
 
      <!-- 右侧小分类展示区 -->
      <div class="right-content">
        <van-empty v-if="currentSubCategories.length === 0" description="暂无子分类" />
        <div v-else class="sub-category-grid">
          <div
            v-for="(sub, index) in currentSubCategories"
            :key="sub.categoryId"
            class="sub-category-item"
          >
            <div class="sub-category-btn" @click="goToRecipeList(sub)">
              {{ sub.categoryName }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="Category_homepage">
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { getMainCategories } from '../../api';
import { Toast } from 'vant';

const router = useRouter();
const searchQuery = ref('');
const activeCategory = ref(0);
const mainCategories = ref([]);
const currentSubCategories = ref([]);
const loading = ref(false);

// 获取分类数据
const fetchCategories = async () => {
  try {
    loading.value = true;
    const data = await getMainCategories();
    mainCategories.value = data || [];
    if (mainCategories.value.length > 0) {
      currentSubCategories.value = mainCategories.value[0].subCategories || [];
    }
  } catch (error) {
    console.error('获取分类数据失败:', error);
    Toast.fail('获取分类数据失败');
  } finally {
    loading.value = false;
  }
};

const switchSubCategory = (index) => {
  if (loading.value) return;
  activeCategory.value = index;
  currentSubCategories.value = mainCategories.value[index]?.subCategories || [];
};

const goToSearchPage = () => {
  router.push('/search');
};

const goToRecipeList = (subCategory) => {
  router.push({
    path: '/small_category',
    query: {
      categoryId: subCategory.categoryId,
      categoryName: subCategory.categoryName
    }
  });
};

// 页面加载时获取数据
onMounted(() => {
  fetchCategories();
});
</script>

<style scoped>
.recipe-category-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f7f8fa;
}

/* 头部和搜索栏样式 */
.header {
  background-color: #ef4444;
  color: white;
  padding: 12px 0;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.header h1 {
  margin: 0 0 12px 0;
  font-size: 18px;
  font-weight: 600;
}

/* 左侧导航栏样式 */
.category-container {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.left-sidebar-wrapper {
  width: 100px;
  overflow-y: auto;
  background-color: #f7f8fa;
  scrollbar-width: none; /* 隐藏滚动条 */
}

.left-sidebar-wrapper::-webkit-scrollbar {
  display: none; /* 隐藏滚动条 */
}

.left-sidebar {
  min-width: 100%;
}

.sidebar-item {
  padding: 16px 8px;
  font-size: 14px;
  color: #666;
  text-align: center;
  cursor: pointer;
  background-color: #f7f8fa;
  transition: all 0.3s;
  border-left: 3px solid transparent;
}

.sidebar-item.active {
  color: #ef4444;
  background-color: #fff;
  border-left: 3px solid #ef4444;
  font-weight: 500;
}

/* 右侧内容区 */
.right-content {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
  background-color: #fff;
}

.sub-category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.sub-category-item {
  display: flex;
}

.sub-category-btn {
  flex: 1;
  padding: 8px 8px;
  background: #f7f8fa;
  color: #333;
  text-align: center;
  border-radius: 6px;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.3s;
  border: 1px solid #eee;
}

.sub-category-btn:active {
  background-color: #ef4444;
  color: white;
  transform: scale(0.95);
}

/* 搜索框样式优化 */
.search-container {
  padding: 0 12px 12px;
}

.custom-search {
  --van-search-padding: 0;
}

.custom-search :deep(.van-search__content) {
  background-color: white;
  border-radius: 20px;
  padding: 0 8px;
  height: 100%;
}

.custom-search :deep(.van-field__control) {
  font-size: 14px;
  padding: 0 8px; /* 保留左右8px的padding，避免文字贴边 */
  height: 100%;
}

/* 空状态样式 */
:deep(.van-empty) {
  padding-top: 40px;
}

:deep(.van-empty__description) {
  color: #969799;
  font-size: 14px;
}
</style>